<template>
	<a-radio-group :options="chartsOptions" v-model:value="selectedType" @change="addChart" />
	<a-row>
		<a-col :span="16">
			<a-row>
				<a-col :span="12">
					<div class="item" :id="[fullScreenState.chartTem ? 'fullScreenStyle' : '']">
						<div class="topbox">
							<div>
								<span class="title">Temperature</span>
								<span>西安测试.唐沣国际.B座.设备1</span>
							</div>
							<div>
								<AlignCenterOutlined @click="isPopup = true"
									:style="{ fontSize: '18px', color: '#676767' }" />
								<FullscreenOutlined @click="fullScreen('chartTem')"
									:style="{ fontSize: '18px', color: '#676767', marginLeft: '6px' }" />
							</div>
						</div>
						<div ref="chartTem" :style="{ width: '100%', height: '100%' }"></div>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="item" :id="[fullScreenState.chartMap ? 'fullScreenStyle' : '']">
						<div style="width: 100%;height: 100%" id="mapbox"></div>
						<FullscreenOutlined @click="fullScreen('chartMap')" class="mapicon"
							:style="{ fontSize: '18px', color: '#676767', marginLeft: '6px' }" />
					</div>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<div class="item" :id="[fullScreenState.chartPress ? 'fullScreenStyle' : '']">
						<div class="topbox">
							<div>
								<span class="title">Pressure</span>
								<span>西安测试.唐沣国际.B座.设备1</span>
							</div>
							<div>
								<AlignCenterOutlined :style="{ fontSize: '18px', color: '#676767' }" />
								<FullscreenOutlined @click="fullScreen('chartPress')"
									:style="{ fontSize: '18px', color: '#676767', marginLeft: '6px' }" />
							</div>
						</div>
						<div ref="chartPress" :style="{ width: '100%', height: '100%' }"></div>
					</div>
				</a-col>
				<a-col :span="12">
					<div class="item" :id="[fullScreenState.chartFan ? 'fullScreenStyle' : '']">
						<div class="topbox">
							<div>
								<span class="title">Fan</span>
								<span>西安测试.唐沣国际.B座.设备1</span>
							</div>
							<div>
								<div>
									<AlignCenterOutlined :style="{ fontSize: '18px', color: '#676767' }" />
									<FullscreenOutlined @click="fullScreen('chartFan')"
										:style="{ fontSize: '18px', color: '#676767', marginLeft: '6px' }" />
								</div>
							</div>
						</div>
						<div ref="chartFan" :style="{ width: '100%', height: '100%' }"></div>
					</div>
				</a-col>
			</a-row>
		</a-col>
		<a-col :span="8">
			<div class="item-right" :id="[fullScreenState.chartAlarm ? 'fullScreenStyle' : '']">
				<div class="topbox">
					<div>
						<span class="title">Alarm</span>
						<span>西安测试.唐沣国际.B座.设备1</span>
					</div>
					<div>
						<AlignCenterOutlined :style="{ fontSize: '18px', color: '#676767' }" />
						<FullscreenOutlined @click="fullScreen('chartAlarm')"
							:style="{ fontSize: '18px', color: '#676767', marginLeft: '6px' }" />
					</div>
				</div>
				<a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 630 }" :pagination="pagination">
				</a-table>
			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="8" v-for="(chart, index) in charts" :key="index">
			<div class="item" :id="[fullScreenState.chartFan ? 'fullScreenStyle' : '']">
				<div class="topbox">
					<div>
						<span class="title">Fan</span>
						<span>西安测试.唐沣国际.B座.设备1</span>
					</div>
					<div>
						<div>
							<AlignCenterOutlined :style="{ fontSize: '18px', color: '#676767' }" />
							<FullscreenOutlined @click="fullScreen('chartFan')"
								:style="{ fontSize: '18px', color: '#676767', marginLeft: '6px' }" />
						</div>
					</div>
				</div>
				<myEcharts :options="chart.options" />
			</div>
		</a-col>
	</a-row>
	<a-modal :open="isPopup" title="仪表盘设置" centered mask @ok="saveSetting" @cancel="isPopup = false">
		<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
			<a-form-item label="设备">
				<a-cascader v-model:value="formState.cascaderValue" :options="cascaderOptions" placeholder="请选择设备" />
			</a-form-item>
			<a-form-item label="变量">
				<a-select v-model:value="formState.dataPoints" :options="dataOptions" mode="tags" placeholder="请选择数据点">
				</a-select>
			</a-form-item>
			<a-form-item label="时间">
				<a-select v-model:value="formState.time" :options="timeOptions" placeholder="请选择数据点">
				</a-select>
			</a-form-item>
			<a-form-item label="名称">
				<a-input v-model:value="formState.name" placeholder="请输入卡片名称" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted,
	nextTick,
	toRaw
} from 'vue'
import * as echarts from 'echarts';
import myEcharts from '@/components/myEcharts.vue';
const chartTem = ref(null);
const chartPress = ref(null);
const chartFan = ref(null)
const isPopup = ref(false)
const formState = reactive({
	cascaderValue: [],
	dataPoints: undefined,
	time: undefined,
	name: '',
})
const labelCol = { span: 3 }
const wrapperCol = { span: 20 }
const dataOptions = [
	{ label: 'Water Leve Low Sw', value: 10 },
	{ label: 'Water Leve Warning Sw', value: 11 },
	{ label: "Low Press 1 Sw", value: 12 },
	{ label: 'Comp Overload Sw', value: 13 },
	{ label: 'Pump Overload Sw', value: 14 },
	{ label: 'Outlet Temp', value: 15 },
	{ label: 'Outdoor Temp', value: 16 },
]
const timeOptions = [
	{ label: '10分钟', value: '10分钟' },
	{ label: '15分钟', value: '15分钟' },
	{ label: "30分钟", value: "30分钟" },
	{ label: '1小时', value: '1小时' },
	{ label: '2小时', value: '2小时' },
	{ label: '6小时', value: '6小时' },
	{ label: '12小时', value: '12小时' },
	{ label: '24小时', value: '24小时' },
	{ label: '1天', value: '1天' },
	{ label: '7天', value: '7天' },
	{ label: '30天', value: '30天' },
]
const cascaderOptions = [
	{
		value: '西安测试',
		label: '西安测试',
		children: [
			{
				value: '唐沣国际',
				label: '唐沣国际',
				children: [
					{
						value: 'B座',
						label: 'B座',
						children: [
							{
								value: '设备1',
								label: '设备1',
							},
							{
								value: '设备2',
								label: '设备2',
							},
							{
								value: '设备3',
								label: '设备3',
							},
						],
					},
				],
			},
		],
	},
	{
		value: '机柜测试',
		label: '机柜测试',
		children: [
			{
				value: '创业中心',
				label: '创业中心',
				children: [
					{
						value: 'F6-1203',
						label: 'F6-1203',
						children: [
							{
								value: 'Tel-1',
								label: 'Tel-1',
							},
							{
								value: 'Tel-2',
								label: 'Tel-2',
							},
						],
					},
				],
			},
		],
	},
];
const fullScreenState = reactive({
	chartTem: false,
	chartPress: false,
	chartFan: false,
	chartAlarm: false,
	chartMap: false,
});
// echarts-温度曲线
const initChartTem = () => {
	const chart = echarts.init(chartTem.value);
	const option = {
		tooltip: {
			show: true,
			trigger: 'axis'
		},
		legend: {
			show: true,
			type: "scroll",
			top: 0,
			textStyle: {
				color: '#676767'
			}
		},
		grid: {
			top: '8%',
			left: '2%',
			right: '2%',
			bottom: '15%',
			containLabel: true
		},
		// dataZoom: [{
		// 	"show": true,
		// 	"height": 22,
		// 	"xAxisIndex": [
		// 		0
		// 	],
		// 	bottom: 40,
		// 	start: 60,
		// 	end: 100,
		// 	handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
		// 	handleSize: '110%',
		// 	handleStyle: {
		// 		color: "#d3dee5",

		// 	},
		// 	textStyle: {
		// 		color: "#fff"
		// 	},
		// 	borderColor: "#90979c"
		// }, {
		// 	"type": "inside",
		// 	"show": true,
		// 	"height": 15,
		// 	"start": 1,
		// 	"end": 35
		// }],
		xAxis: [
			{
				name: '',
				type: 'category',
				boundaryGap: true,
				axisLabel: {
					textStyle: {
						color: '#676767',
						padding: 10,
						fontSize: 10
					},
					formatter: function (data) {
						return data
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "#E4E4E4"
					},
				},
				axisLine: {
					show: true,
					textStyle: {
						color: '#676767',
					},
				},
				axisTick: {
					show: true,
					textStyle: {
						color: '#E4E4E4',
					},
				},
				data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
					'2021.08.01', '2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30',
				]
			}],
		yAxis: [{
			name: '',
			splitLine: {
				show: true,
				lineStyle: {
					color: "#E4E4E4"
				},
			},
			axisLine: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisTick: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: '#676767',
					padding: 10,
				},
				formatter: function (value) {
					if (value === 0) {
						return value
					}
					return value
				}
			},
		}],
		series: [{
			name: 'Outlet Temp',
			type: 'line',
			symbol: 'circle',
			showAllSymbol: true,
			symbolSize: 0,
			smooth: true,
			lineStyle: {
				normal: {
					width: 2,
					color: "rgba(33,150,243, 1)",
				}
			},
			itemStyle: {
				color: "rgba(33,150,243, 1)",
				borderWidth: 2
			},
			tooltip: {
				show: true
			},
			data: ["20", "50", "42", "41", "30", "60", "45", "30", "50", "42", "20", "50"]
		}, {
			name: 'Outdoor Temp',
			type: 'line',
			symbol: 'circle',
			showAllSymbol: true,
			symbolSize: 0,
			smooth: true,
			lineStyle: {
				normal: {
					width: 2,
					color: "rgba(76,175,80, 1)",
				}
			},
			itemStyle: {
				color: "rgba(76,175,80, 1)",
				borderWidth: 2

			},
			tooltip: {
				show: true
			},
			data: ["40", "56", "52", "75", "50", "40", "32", "52", "35", "60", "52", "85"]
		}]
	};
	chart.setOption(option);
	chart.resize()
	return chart;
};
// echarts-压力曲线
const initChartPress = () => {
	const chart = echarts.init(chartPress.value);
	const option = {
		tooltip: {
			show: true,
			trigger: 'axis'
		},
		legend: {
			show: true,
			type: "scroll",
			bottom: 34,
			textStyle: {
				color: '#676767'
			}
		},
		grid: {
			top: '5%',
			left: '2%',
			right: '2%',
			bottom: '20%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: true,
			axisLabel: {
				textStyle: {
					color: '#676767',
					padding: 10,
					fontSize: 10
				},
				formatter: function (data) {
					return data
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#E4E4E4"
				},
			},
			axisLine: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisTick: {
				show: true,
				textStyle: {
					color: '#E4E4E4',
				},
			},
			data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
				'2021.08.01', '2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30',
			]
		}],
		yAxis: [{
			name: '',
			splitLine: {
				show: true,
				lineStyle: {
					color: "#E4E4E4"
				},
			},
			axisLine: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisTick: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: '#676767',
					padding: 10,
				},
				formatter: function (value) {
					if (value === 0) {
						return value
					}
					return value
				}
			},
		}],
		series: [{
			name: 'High Press',
			type: 'line',
			symbol: 'circle',
			showAllSymbol: true,
			symbolSize: 0,
			smooth: true,
			lineStyle: {
				normal: {
					width: 2,
					color: "rgba(33,150,243, 1)",
				}
			},
			itemStyle: {
				color: "rgba(33,150,243, 1)",
				borderWidth: 2
			},
			tooltip: {
				show: true
			},
			data: [20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25]
		}, {
			name: 'Low Press 1',
			type: 'line',
			symbol: 'circle',
			showAllSymbol: true,
			symbolSize: 0,
			smooth: true,
			lineStyle: {
				normal: {
					width: 2,
					color: "rgba(76,175,80, 1)",
				}
			},
			itemStyle: {
				color: "rgba(76,175,80, 1)",
				borderWidth: 2

			},
			tooltip: {
				show: true
			},
			data: [40, 56, 42, 65, 45, 48, 42, 52, 45, 50, 52, 55]
		}]
	};
	chart.setOption(option);
	chart.resize()
	return chart;
};
// echarts-风扇曲线
const initChartFan = () => {
	const chart = echarts.init(chartFan.value);
	const option = {
		tooltip: {
			show: true,
			trigger: 'axis'
		},
		legend: {
			show: true,
			type: "scroll",
			bottom: 34,
			textStyle: {
				color: '#676767'
			}
		},
		grid: {
			top: '5%',
			left: '2%',
			right: '2%',
			bottom: '20%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: true,
			axisLabel: {
				textStyle: {
					color: '#676767',
					padding: 10,
					fontSize: 10
				},
				formatter: function (data) {
					return data
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#E4E4E4"
				},
			},
			axisLine: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisTick: {
				show: true,
				textStyle: {
					color: '#E4E4E4',
				},
			},
			data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
				'2021.08.01', '2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30',
			]
		}],
		yAxis: [{
			name: '',
			splitLine: {
				show: true,
				lineStyle: {
					color: "#E4E4E4"
				},
			},
			axisLine: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisTick: {
				show: true,
				textStyle: {
					color: '#676767',
				},
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: '#676767',
					padding: 10,
				},
				formatter: function (value) {
					if (value === 0) {
						return value
					}
					return value
				}
			},
		}],
		series: [{
			name: 'Cond Fan Output',
			type: 'line',
			symbol: 'circle',
			showAllSymbol: true,
			symbolSize: 0,
			smooth: true,
			lineStyle: {
				normal: {
					width: 2,
					color: "rgba(33,150,243, 1)",
				}
			},
			itemStyle: {
				color: "rgba(33,150,243, 1)",
				borderWidth: 2
			},
			tooltip: {
				show: true
			},
			data: [20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25]
		}]
	};
	chart.setOption(option);
	chart.resize()
	return chart;
}
// table-Alarm列表
const columns = ref([{
	title: '设备',
	dataIndex: 'name',
	key: 'name',
},
{
	title: '名称',
	dataIndex: 'value',
	key: 'value',
	customStyle: {
		whiteSpace: 'normal',
		wordBreak: 'break-all',
		lineHeight: '1.5'
	},
},
{
	title: '状态',
	dataIndex: 'status',
	key: 'status',
},
{
	title: '时间',
	dataIndex: 'time',
	key: 'time',
	customStyle: {
		whiteSpace: 'normal',
		wordBreak: 'break-all',
		lineHeight: '1.5'
	},
},
]);
const dataSource = ref([{
	key: '1',
	name: '设备1',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '2',
	name: '设备2',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '3',
	name: '设备3',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '4',
	name: '设备4',
	value: 'FC Temp Sensor Alarm',
	status: 'Inactive',
	time: "2024-03-11 18:07:13"
},
{
	key: '5',
	name: '设备5',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '6',
	name: '设备6',
	value: 'FC Temp Sensor Alarm',
	status: 'Inactive',
	time: "2024-03-11 18:07:13"
},
{
	key: '7',
	name: '设备7',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '8',
	name: '设备8',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '9',
	name: '设备9',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '10',
	name: '设备10',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
{
	key: '11',
	name: '设备11',
	value: 'FC Temp Sensor Alarm',
	status: 'Active',
	time: "2024-03-11 18:07:13"
},
])
const pagination = {
	pageSize: 10, // 每页显示的条目数量
	total: dataSource.length, // 数据总数
	showSizeChanger: true, // 允许更改每页显示的条目数量
	showQuickJumper: true, // 允许快速跳转
	onChange: (page, pageSize) => {
		console.log('Page: ', page);
		console.log('PageSize: ', pageSize);
		// 处理页码改变的逻辑
	},
	onShowSizeChange: (current, size) => {
		console.log('Current: ', current);
		console.log('Size: ', size);
		// 处理每页显示条目数量改变的逻辑
	},
};

// map-设备分布
const addressInfo = [{
	lng: 116.3979471,
	lat: 39.9081726,
	device: "北京客户.现场1.工程1.设备1",
	tem: 23.3,
	hum: 30.3,
	com: 'off',
	state: 'online'
}]
const initMap = () => {
	var url =
		// 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHVja2RvZyIsImEiOiJjbGdrNXZmNWkxY2NqM3BteWltcjYwaGl4In0.Xm_EO9lIxHAiCcpJx6FT1A'
		'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
	var layer = L.tileLayer(url, {
		subdomains: ['1', '2', '3', '4'],
		maxZoom: 22,
		attribution: '© OpenStreetMap contributors © CARTO'
	})
	const map = L.map("mapbox", {
		center: [39.9081726, 116.3979471], //中心坐标格式[纬度，经度]
		zoom: 6, //缩放级别
		maxZoom: 20,
		zoomControl: true, //缩放组件
		attributionControl: true, //去掉右下角logo
		layers: [layer], //图层
	});
	/*-------------------------------------------------------------标记------------------------------*/
	var svgIconUrl =
		''
	var testiconUrl =
		''
	// 创建一个 L.Icon 实例，使用 SVG 图片作为图标
	var myIcon1 = L.icon({
		iconUrl: svgIconUrl,
		iconSize: [60, 60], // 例如，SVG 图标宽度为 38px，高度为 95px
		// 设置图标在标记上的定位点
		iconAnchor: [22, 94], // 例如，定位点在 SVG 图标的中心
		// 可选：设置弹出窗口时图标的定位点
		popupAnchor: [-3, -76]
	});
	var myIcon2 = L.icon({
		iconUrl: testiconUrl,
		iconSize: [60, 60],
		iconAnchor: [22, 94],
		popupAnchor: [-3, -76]
	});
	// 循环 addressInfo 数组创建标记
	addressInfo.forEach(function (info) {
		let html = `
		    <p style="font-weight: 600;color:#000">${info.device}</p>
			<p>
			  <span style='color:#000'>风机:</span>
			  <span style='color:#06c'>${info.com}</span>
			</p>
		    <p>
		      <span style='color:#000'>温度:</span>
		      <span style='color:#06c'>${info.tem}</span> ℃
		    </p>
			<p>
			  <span style='color:#000'>湿度:</span>
			  <span style='color:#06c'>${info.hum}</span> ℃
			</p>
			 <span class="clickable-paragraph" style="border-bottom: 1px solid #06c;color:#06c;cursor: pointer;">查看详情</span>
			`
		// 为每个地点创建一个标记
		var marker = L.marker([info.lat, info.lng], {
			icon: info.state === 'online' ? myIcon1 : myIcon2
		}).bindPopup(html, {
			className: 'my-popup-class'
		}).on('popupopen', function (e) {
			var popup = e.popup;
			// 监听弹窗内的特定段落的点击事件
			popup.getElement().querySelector('.clickable-paragraph').addEventListener(
				'click',
				function () {
					console.log('执行你想要进行的操作---点击弹框详情', info);
					map.flyTo([info.lat, info.lng], 6, {
						animate: true, // 确保动画效果开启
						duration: 2.0, // 动画持续时间，单位秒
					});
				});
		});
		marker.on('click', function () {
			map.flyTo([info.lat, info.lng], 18, {
				animate: true, // 确保动画效果开启
				duration: 3.0, // 动画持续时间，单位秒
			});
		});
		map.addLayer(marker);
	});
}

// 全屏切换
const fullScreen = (chartsName) => {
	fullScreenState[chartsName] = !fullScreenState[chartsName];
	nextTick(() => {
		if (chartsName === 'chartTem') initChartTem()
		if (chartsName === 'chartPress') initChartPress()
		if (chartsName === 'chartFan') initChartFan()
		if (chartsName === 'chartMap') initMap()
	});
}
// 弹框处理
const saveSetting = () => {
	console.log('--------------', formState);
}

// 添加面板
var chartsOptions = [
	{ label: '柱状图', value: 'bar' },
	{ label: '折线图', value: 'line' },
	{ label: '仪表盘', value: 'gauge' },
]

var color_percent0 = '',
	color_percent100 = '',
	dotArray = [];
function calculateDot(data) {
	if (data <= 20) {
		dotArray.push(80)
		color_percent0 = 'rgba(12,255,0,1)'
		color_percent100 = 'rgba(12,255,0,.3)'
	} else if (data > 20 && data <= 40) {
		dotArray.push(...[80, 80])
		color_percent0 = 'rgba(12,255,0,1)'
		color_percent100 = 'rgba(12,255,0,.3)'
	} else if (data > 40 && data <= 60) {
		dotArray.push(...[80, 80, 80])
		color_percent0 = 'rgba(255,123,0,1)'
		color_percent100 = 'rgba(255,123,0,.3)'
	} else if (data > 60 && data <= 80) {
		dotArray.push(...[80, 80, 80, 80])
		color_percent0 = 'rgba(255,0,36,1)'
		color_percent100 = 'rgba(255,0,36,.3)'
	} else if (data > 80 && data <= 100) {
		dotArray.push(...[80, 80, 80, 80, 80])
		color_percent0 = 'rgba(255,0,36,1)'
		color_percent100 = 'rgba(255,0,36,.3)'
	}
}
const selectedType = ref('bar');
const charts = ref([]);
function addChart() {
	const options = generateChartOptions(selectedType.value);
	charts.value.push({ options });
}
function generateChartOptions(type) {
	let options = {};
	switch (type) {
		case 'bar':
			options = {
				tooltip: {
					show: true,
					trigger: 'axis'
				},
				legend: {
					show: true,
					type: "scroll",
					bottom: 34,
					textStyle: {
						color: '#676767'
					}
				},
				grid: {
					top: '5%',
					left: '2%',
					right: '2%',
					bottom: '20%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: true,
					axisLabel: {
						textStyle: {
							color: '#676767',
							padding: 10,
							fontSize: 10
						},
						formatter: function (data) {
							return data
						}
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "#E4E4E4"
						},
					},
					axisLine: {
						show: true,
						textStyle: {
							color: '#676767',
						},
					},
					axisTick: {
						show: true,
						textStyle: {
							color: '#E4E4E4',
						},
					},
					data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
						'2021.08.01',
					]
				}],
				yAxis: [{
					name: '',
					splitLine: {
						show: true,
						lineStyle: {
							color: "#E4E4E4"
						},
					},
					axisLine: {
						show: true,
						textStyle: {
							color: '#676767',
						},
					},
					axisTick: {
						show: true,
						textStyle: {
							color: '#676767',
						},
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#676767',
							padding: 10,
						},
						formatter: function (value) {
							if (value === 0) {
								return value
							}
							return value
						}
					},
				}],
				series: [
					{
						name: '分布',
						type: 'bar',
						zlevel: 1,
						itemStyle: {
							normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#1492ff'
									},
									{
										offset: 1,
										color: 'rgba(39,182,255,0.2)'
									}
									],
									globalCoord: false
								},
								barBorderRadius: [30, 30, 0, 0],
							},
						},
						barWidth: 20,
						data: [Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100), Math.round(Math.random() * 100)], // 随机数据作为示例  
					},
				]
			};
			break;
		case 'line':
			options = {
				tooltip: {
					show: true,
					trigger: 'axis'
				},
				legend: {
					show: true,
					type: "scroll",
					bottom: 34,
					textStyle: {
						color: '#676767'
					}
				},
				grid: {
					top: '5%',
					left: '2%',
					right: '2%',
					bottom: '20%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: true,
					axisLabel: {
						textStyle: {
							color: '#676767',
							padding: 10,
							fontSize: 10
						},
						formatter: function (data) {
							return data
						}
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "#E4E4E4"
						},
					},
					axisLine: {
						show: true,
						textStyle: {
							color: '#676767',
						},
					},
					axisTick: {
						show: true,
						textStyle: {
							color: '#E4E4E4',
						},
					},
					data: ['2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30', '2021.07.31',
						'2021.08.01', '2021.07.26', '2021.07.27', '2021.07.28', '2021.07.29', '2021.07.30',
					]
				}],
				yAxis: [{
					name: '',
					splitLine: {
						show: true,
						lineStyle: {
							color: "#E4E4E4"
						},
					},
					axisLine: {
						show: true,
						textStyle: {
							color: '#676767',
						},
					},
					axisTick: {
						show: true,
						textStyle: {
							color: '#676767',
						},
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#676767',
							padding: 10,
						},
						formatter: function (value) {
							if (value === 0) {
								return value
							}
							return value
						}
					},
				}],
				series: [{
					name: 'High Press',
					type: 'line',
					symbol: 'circle',
					showAllSymbol: true,
					symbolSize: 0,
					smooth: true,
					lineStyle: {
						normal: {
							width: 2,
							color: "rgba(33,150,243, 1)",
						}
					},
					itemStyle: {
						color: "rgba(33,150,243, 1)",
						borderWidth: 2
					},
					tooltip: {
						show: true
					},
					data: [20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25]
				}, {
					name: 'Low Press 1',
					type: 'line',
					symbol: 'circle',
					showAllSymbol: true,
					symbolSize: 0,
					smooth: true,
					lineStyle: {
						normal: {
							width: 2,
							color: "rgba(76,175,80, 1)",
						}
					},
					itemStyle: {
						color: "rgba(76,175,80, 1)",
						borderWidth: 2

					},
					tooltip: {
						show: true
					},
					data: [40, 56, 42, 65, 45, 48, 42, 52, 45, 50, 52, 55]
				}]
			};
			break;
		case 'gauge':
			var percent = (Math.random() * 100).toFixed(2);
			calculateDot(percent)//80%显示4个点，
			options = {
				title: {
					"x": '50%',
					"y": '45%',
					textAlign: "center",
					top: '78%',//字体的位置
					'text': 'High Press',
					"textStyle": {
						"fontWeight": 'normal',
						"color": '#000',
						"fontSize": 12
					},

				},
				xAxis: {
					show: false,//是否展示x轴
					min: function (value) {//调整x轴上面数据的位置
						return value.min - 7;
					},
					max: function (value) {
						return value.max + 7;
					},
					splitLine: {
						lineStyle: {
							show: true,
							type: 'dashed'
						}
					},
					"axisLabel": {
						"interval": 0,
						rotate: 40,
						textStyle: {
							fontSize: 12,
							color: '#000'
						},
					},
					data: ['1', '2', '3', '4', '5']
				},
				yAxis: {
					show: false,
					name: '万元',
					max: 200,
					splitLine: {
						lineStyle: {
							type: 'dashed'
						}
					}
				},
				series: [
					{
						"name": '',
						"type": 'pie',
						"radius": ['50%', '70%'],
						"avoidLabelOverlap": false,
						"startAngle": 225,
						"color": [{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0.4,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: color_percent0 // 0% 处的颜色
							}, {
								offset: 1,
								color: color_percent100 // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						}, 'none'],
						"hoverAnimation": false,//是否开启 hover 在扇区上的放大动画效果。
						"legendHoverLink": false,//是否启用图例 hover 时的联动高亮。
						"label": {
							"normal": {
								"show": false,
								"position": 'center'
							},
							"emphasis": {
								"show": true,
								"textStyle": {
									"fontSize": '30',
									"fontWeight": 'bold'
								}
							}
						},
						"labelLine": {
							"normal": {
								"show": false
							}
						},
						"data": [{
							"value": 75,
							"name": '1'
						}, {
							"value": 25,
							"name": '2'
						}]
					},
					{
						"name": ' ',
						"type": 'pie',
						"radius": ['48%', '47%'],
						"avoidLabelOverlap": false,//是否启用防止标签重叠策略
						"startAngle": 225,

						"hoverAnimation": false,
						"legendHoverLink": false,
						"label": {
							"normal": {
								"show": false,
								"position": 'center'
							},
							"emphasis": {
								"show": true,
								"textStyle": {
									"fontSize": '30',
									"fontWeight": 'bold'
								}
							}
						},
						"labelLine": {
							"normal": {
								"show": false
							}
						},
						"data": [{
							"value": 75,
							"name": '1'
						}, {
							"value": 25,
							"name": '2'
						}]
					},
					{
						"name": '',
						"type": 'pie',
						"radius": ['50%', '70%'],
						"avoidLabelOverlap": false,
						"startAngle": 315,
						"color": ['rgba(34,34,34,.9)', "#ff7a00", "transparent"],
						"hoverAnimation": false,
						"legendHoverLink": false,
						"clockwise": false,//饼图的扇区是否是顺时针排布。
						"itemStyle": {
							"normal": {
								"borderColor": "transparent",
								"borderWidth": "20"
							},
							"emphasis": {
								"borderColor": "transparent",
								"borderWidth": "20"
							}
						},
						"z": 10,
						"label": {
							"normal": {
								"show": false,
								"position": 'center'
							},

						},
						"labelLine": {
							"normal": {
								"show": false
							}
						},
						"data": [
							{
								"value": (100 - percent) * 270 / 360,
								"label": {
									formatter: percent + `\n{unit|${'bar'}}`,
									position: 'center',
									show: true,
									color: '#000',
									fontSize: 26,
									rich: {
										unit: {
											color: '#7a8c9f',
											fontSize: 10,
										},
									},
								},
								"name": ''
							},
							{
								"value": 1,
								"name": ''
							},
							{
								"value": 100 - (100 - percent) * 270 / 360,
								"name": ''
							}
						]
					},
				]
			};
			break;
	}
	return options;
}

onMounted(async () => {
	await initChartTem()
	await initChartPress()
	await initChartFan()
	await initMap()
});
</script>

<style scoped>
#fullScreenStyle {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 10000;
	background: #fff;
	box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
	margin: 0;
	border-radius: 0px;
}

.cardPopup {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1000;
	background: rgb(0, 0, 0, .5);
	box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
	margin: 0;
	border-radius: 0px;
}

.cardPanel {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 600px;
	height: 400px;
	margin: 6px;
	padding: 10px;
	border-radius: 6px;
	background: #fff;
	z-index: 10000;
	box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}

.mapicon {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 999;
}

.item {
	height: 400px;
	margin: 6px;
	padding: 10px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}

.item-right {
	height: 810px;
	margin: 6px;
	padding: 10px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}

.topbox {
	padding: 5px 10px 5px 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.title {
		font-size: 20px;
		font-weight: 700;
		letter-spacing: normal;
	}

	span {
		font-size: 12px;
		color: "#E4E4E4";
		display: inline-block;
		margin-left: 8px;
	}

	div {
		cursor: pointer;
	}
}

.ant-table-tbody>tr>td {
	padding: 10px 2px !important;
	overflow: hidden;
	text-overflow: -webkit-line-clamp(2);
	-webkit-line-clamp: 2;
	word-break: break-word;
}
</style>